<template>
	<view class="container">
		<z-paging ref="paging" v-model="dataList" @query="queryList" auto-show-back-to-top
			back-to-top-threshold="400rpx" back-to-top-with-animate>
			<template #top>
				<view class="header fle-ra-be-cen">
					<view class="pull-down">
						<uni-data-select v-model="selectValue" :localdata="range"
							@change="select_change"></uni-data-select>
					</view>
					<view class="search ">
						<image class="pic" src="https://peixin.peiyu.online/xmk/images/搜索.svg" mode="heightFix"></image>
						<input class="ipt" type="text" v-model="searchValue" @input="serch_input" placeholder="输入搜索"
							placeholder-class="place" />
					</view>
					<image class="add" src="https://peixin.peiyu.online/xmk/images/扫码.svg" mode="heightFix" @click="scan_code">
					</image>
				</view>
			</template>
			<view class="content" v-for="(item, index) in dataList" @click="item_click(item,index)">
				<view class="left">
					<text class="txt">{{item.productName}}</text>
					<view style="display: flex;align-items: center;">
						<text class="name">{{item.price}}</text>
						<text class="name">元</text>
					</view>
				</view>
				<view class="right">
					<text class="time">×{{item.bigNum}}</text>
				</view>
			</view>
		</z-paging>
	</view>

</template>

<script setup>
	import {
		ref,
		nextTick
	} from 'vue';
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app"
	import {
		api_productCategory_get_by_product,
		api_product_page
	} from "../../../apis/apis.js"


	const dataList = ref([]);
	const paging = ref(null);
	const selectValue = ref(0); //下拉选择器value
	const range = ref([]);
	const categoryId = ref()
	const searchValue = ref('')
	const isPhoto = ref(false)
	const barCode = ref("");


	// 刷新方法  
	const reload = () => {
		// 使用 nextTick 确保 DOM 已经更新
		nextTick(() => {
			if (paging.value) { // 检查 paging 是否已经定义
				paging.value.reload();
			}
		});
	};

	// 加载订单分页数据
	const queryList = async (current, size) => {
		const params = {
			current: current,
			size: size,
		};

		if (categoryId.value !== undefined) {
			params.categoryId = categoryId.value;
		}

		if (searchValue.value !== '') {
			params.productName = searchValue.value;
		}
		try {
			const res = await api_product_page(params);
			paging.value.complete(res.data.records);
		} catch (error) {
			paging.value.complete(false);
		}
	};

	//选择大类
	const select_change = (e) => {
		console.log(e);
		if (e == 0) {
			categoryId.value = undefined
		} else {
			categoryId.value = e;
		}
		reload()
	}

	//搜索
	const serch_input = () => {
		reload()
	}


	//点击产品
	const item_click = (item, index) => {
		console.log("item",item.id);
		uni.navigateTo({
			url: `/pages/storeman/store/storeInfo/storeInfo?id=${item.id}`
		})
	}

	//扫一扫
	const scan_code = () => {
		// 调起条码扫描
		uni.scanCode({
			scanType: ['barCode'],
			success: (res) => {
				console.log('条码类型：' + res.scanType);
				console.log('条码内容：' + res.result);
				uni.showToast({
					title: "识别成功",
					icon: "success"
				});
				barCode.value = res.result;
				uni.navigateTo({
					url: `/pages/storeman/store/productInfo/productInfo?barCode=${barCode.value}`
				});
			}
		});
	}


	onShow(() => {
		// reload();
	});

	onLoad(async () => {
		try {
			let res = await api_productCategory_get_by_product();
			range.value = res.data.map(item => ({
				value: item.id,
				text: item.categoryName
			}));
			range.value.unshift({
				value: 0,
				text: "全部"
			});
		} catch (e) {
			uni.showToast({
				title: '错误',
				icon: "none"
			});
		}
	});
</script>

<style lang="scss" scoped>
	.fle-co-n-cen {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.fle-ra-be-cen {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20rpx;
	}

	.fle-ra-n-cen {
		display: flex;
		align-items: center;
	}

	.container {
		width: 750rpx;

		.header {
			width: 700rpx;
			height: 80rpx;
			margin-left: 25rpx;

			.pull-down {
				width: 200rpx;
				height: 80rpx;
			}

			.search {
				height: 80rpx;
				flex: 1;
				border-bottom: 1rpx solid $font-primary-color;
				display: flex;
				align-items: center;

				.pic {
					height: 40rpx;
					margin-right: 6rpx;
				}

				.ipt {
					border: none;
					color: $font-primary-color;
					width: auto;
					font-family: Alibaba_PuHuiTi_Light;
					font-weight: 300;
					font-size: 30rpx;

					:deep() {
						.place {
							font-size: 30rpx;
							color: #d0d0d0;
						}
					}
				}
			}

			.add {
				height: 44rpx;
			}
		}

		.content {
			height: 144rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 750rpx;
			padding: 30rpx 25rpx 16rpx 25rpx;
			border-bottom: 1rpx solid #e7e7e7;

			.left {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.txt {
					font-family: Alibaba_PuHuiTi_Light;
					font-weight: 300;
					font-size: 36rpx;
					color: $font-primary-color;
				}

				.name {
					font-family: Alibaba_PuHuiTi_Light;
					font-weight: 300;
					font-size: 32rpx;
					color: $font-sub-color;
				}
			}

			.right {

				.time {
					font-family: Alibaba_PuHuiTi_Thin;
					font-weight: 250;
					font-size: 32rpx;
					color: $font-9e-color;
				}
			}
		}
	}
</style>